﻿/*
Posize jQuery plugin
====================

Version: 1.0

Requisites: jQuery, rsuite.extends

Features: allow elements to dock inside their parent

Usage:
Automatic:
- Add `posizable` class to parent element
- Add `dock` attribute to each child element, value can be set as `left`, `right`, `top`, `bottom`, `fill`
Manual:
- Call `posize` method on parent element

Sample:

<div class='posizable'>
<div dock='left'>Left panel</div>
<div dock='top'>Top panel</div>
<div dock='right'>Right panel</div>
<div dock='bottom'>Bottom panel</div>
<div dock='fill'>Inside panel</div>
</div>
*/
$.fn.posize = function (reset) {
    if (reset) {
        this.each(function () {
            $(this).css({
                'over-flow': '',
                position: ''
            }).children('[dock]').css('position', '').each(function () {
                switch ($(this).attr('dock')) {
                    case 'left':
                    case 'right':
                        $(this).css({ left: '', top: '', height: '' });
                        break;
                    case 'top':
                    case 'bottom':
                        $(this).css({ left: '', top: '', width: '' });
                        break;
                }
            });
        });
    }

    if (this == window) {
        return $('.posizable').posize();
    }

    this.each(function () {
        var self = $(this);
        self.css({
            'over-flow': 'hidden',
            position: 'absolute'
        }).children('[dock]').css('position', 'absolute').end()
        .resize(function () {
            var position = self.css('position');

            var bound;
            if (position != 'absolute' && position != 'relative' && position != 'fixed') {
                bound = self.innerBound();
            }
            else {
                bound = self.innerRect();
            }
            bound.right = bound.left + bound.width;
            bound.bottom = bound.top + bound.height;

            self.children('[dock]').each(function () {
                if ($(this).is(':hidden')) {
                    //return;
                }

                switch ($(this).attr('dock')) {
                    case 'left':
                        $(this).css({
                            left: bound.left,
                            top: bound.top,
                            height: bound.bottom - bound.top
                        });
                        bound.left += $(this).outerWidth();
                        break;
                    case 'right':
                        $(this).css({
                            left: bound.right - $(this).outerWidth(),
                            top: bound.top,
                            height: bound.bottom - bound.top
                        });
                        bound.right -= $(this).outerWidth();
                        break;
                    case 'top':
                        $(this).css({
                            left: bound.left,
                            top: bound.top,
                            width: bound.right - bound.left
                        });
                        bound.top += $(this).outerHeight();
                        break;
                    case 'bottom':
                        $(this).css({
                            left: bound.left,
                            top: bound.bottom - $(this).outerHeight(),
                            width: bound.right - bound.left
                        });
                        bound.bottom -= $(this).outerHeight();
                        break;
                    case 'fill':
                        $(this).css({
                            left: bound.left,
                            top: bound.top,
                            width: bound.right - bound.left,
                            height: bound.bottom - bound.top
                        });
                        break;
                    case 'center':
                        $(this).css({
                            left: (bound.left + bound.right) / 2 - $(this).outerWidth() / 2,
                            top: (bound.top + bound.bottom) / 2 - $(this).outerHeight() / 2
                        });
                        break;
                }
            });
        });
        self.trigger('resize');
    });
}